<style lang="scss">
	#accountfile {
	  display: none;
	}
</style>
<template>
	<!-- 成员账号申请 -->
	<div id="account" class="gcontent" style="padding: 0px 40px;">
		<div v-if="!ifedit" style="padding-bottom: 10px;">
			<Button type="primary" @click="selectAccount">导入账号</Button>
			<input type="file" id="accountfile" @change="importAccount" />
			<a href="./static/file_mould/account_model.xlsx" class="download_boder" style="font-size: 13px;margin-left: 10px;top: 8px; position: relative;">账号模板</a>
		</div>
		<div class="gcontent" style="font-size: 16px;">
			<template v-if="applyinfo.account.people.length > 0 || !ifedit ">
				<Row>
					<Col span="22" style="width:100%">
					<table border="1px" class="tale" style="width:100%;position:relative;">
						<tr align="center" class="tale_title">
							<th>姓名</th>
							<th>已有的一级4A主账号</th>
							<th>
								<span>成员归属</span>
								<Tooltip content="成员归属如果是省公司请填写省公司，如果是合作伙伴，请注明涉及厂商的名字/厂商加入4A机构的名字。" theme="light" max-width="200">
									<Icon type="md-alert" />
								</Tooltip>
							</th>
							<td>
								<Button type="primary" size="small" @click="addAccount" :disabled="ifedit">新增</Button>
							</td>
						</tr>
						<template v-for="(item, index) in applyinfo.account.people">
							<tr align="center" style="height:50px">
								<td>
									<span v-if="ifedit">{{applyinfo.account.people[index].peopleName}}</span>
									<component v-else ref="inputSearch"  :dataList="applyinfo.account.peopleList"  :checkLable="applyinfo.account.people[index].peopleUserId"
									 :is="'inputSearch'"  :multiple="false" @on-change="changePeople($event,index)" style="width:90%"></component>
								</td>
								<td>
									<span v-if="ifedit">{{applyinfo.account.people[index].fourA}}</span>
									<Input v-else style="width:90%;" v-model="applyinfo.account.people[index].fourA"></Input>
								</td>
								<td>
									<span v-if="ifedit">{{applyinfo.account.people[index].outterCompany}}</span>
									<Input v-else style="width: 90%;" v-model="applyinfo.account.people[index].outterCompany"></Input>
								</td>
								<td style="width:12%">
									<Button type="warning" size="small" @click="removeAccount(index)" :disabled="ifedit">删除</Button>
									<Button type="primary" size="small" @click="expandAccount(index)">{{(accountIndex.indexOf(index) == -1)?'展开':'收起'}}</Button>
								</td>
							</tr>
							<tr v-if="accountIndex.indexOf(index) != -1">
								<td colspan="6">
									<Form ref="applyinfo.account" :model="applyinfo.account.people[index]" label-position="left" :label-width="110"
									 style="position:relative;left:1%;padding:1%;">
										<Row>
											<Col>
											<span>账号类型：</span>
											</Col>
										</Row>
										<Row style="padding:1%">
											<Col span="5">
											<Checkbox v-model="applyinfo.account.people[index].isEtl" @on-change="changeEtl(index)" :disabled="ifedit">
												<span>采集交换区账号</span>
											</Checkbox>
											</Col>
											<Col span="4">
											<Checkbox v-model="applyinfo.account.people[index].isPaas" @on-change="changePaaS(index)" :disabled="ifedit">
												<span>PaaS从账号</span>
											</Checkbox>
											</Col>
											<Col span="4">
											<Checkbox v-model="applyinfo.account.people[index].isUap" @on-change="changeUap(index)" :disabled="ifedit">
												<span>UAP客户端</span>
											</Checkbox>
											</Col>
											<Col span="5">
											<Checkbox v-model="applyinfo.account.people[index].isHadoop" @on-change="changeHadoop(index)" :disabled="ifedit">
												<span>Hadoop客户端</span>
											</Checkbox>
											</Col>
											<Col span="6">
											<Checkbox v-model="applyinfo.account.people[index].isElse" @on-change="changeElse(index)" :disabled="ifedit">
												<span>其他</span>
											</Checkbox>
											<Input v-model="applyinfo.account.people[index].elseAuthes[0].des" size="small" style="width:60%" v-if="applyinfo.account.people[index].isElse"
											 :readonly="ifedit" />
											</Col>
										</Row>
									</Form>
								</td>
							</tr>
						</template>
					</table>
					</Col>
				</Row>
				<Row style="padding-top: 10px;color: #bbb;">
					1、成员归属如果是省公司请填写省公司，如果是合作伙伴，请注明涉及厂商的名字/厂商加入4A机构的名字。
				</Row>
			</template>
			<template v-else>
				<div class="gcontent" style="text-align:center">
					<span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无账号申请</span>
				</div>
			</template>
		</div>

	</div>

</template>
<script>
	import ajax from "../../../ajax_util"
	import Axios from 'axios'
	import inputSearch from '../../../base/input_search'
	import excel from "../../../utils/excel";

	export default {
		name: "account",
		components: {
			inputSearch
		},
		data() {
			return {
				readonly: true, //是否只读
				labelWidth: 140,
				bealoonTrue: true,
				accountIndex: [0],
				applyinfo: this.Papply,
			}
		},
		created: function() {
			console.log("-------------Papply----------》", this.Papply.account.people)
			if (this.Papply.account.people.length > 0) {
				this.Papply.account.people.forEach((item, index) => {
					if (item.peopleName != "") {
						this.accountIndex.push(index)
					}
				});
			}

		},
		mounted: function() {

		},
		methods: {
			selectAccount(){
				const el = document.getElementById("accountfile");
				el.click();
			},
			async importAccount(){
				const el = document.getElementById("accountfile");
				const file = el.files[0];
				var that = this
				var data = await excel.importFromLocal(file, 0, "", 0);
				var columns = [
					{
						title:"姓名",
						key: "peopleName"
					},
					{
						title:"已有的一级4A主账号",
						key: "fourA"
					},
					{
						title:"成员归属",
						key: "outterCompany"
					},
					{
						title:"采集交换区账号",
						key: "isEtl"
					},
					{
						title:"PaaS从账号",
						key: "isPaas"
					},
					{
						title:"UAP客户端",
						key: "isUap"
					},
					{
						title:"Hadoop客户端",
						key: "isHadoop"
					},
					{
						title:"其他(填写具体账号类型)",
						key: "isElse"
					}
				]
				console.log("importAccount------->",data)
				var list = excel.handleInfoByContent(data.body,columns, this)
				console.log("projectList-------->", list)
				list.forEach((item, index) =>{
					if(item.peopleName != '示例'){
						if(item.peopleName.trim() != ""){
							this.applyinfo.account.peopleList.push(
								{
									id: item.peopleName,
									user_name: item.peopleName
								}
							)
						}
						var temp = {
							peopleUserId: item.peopleName,
							peopleName: item.peopleName,
							tenantName: "",
							fourA: item.fourA,
							igroup: "",
							outterCompany: item.outterCompany,
							isEtl: false,
							isPaas: false,
							isUap: false,
							isHadoop: false,
							isElse: false,
							hftps: [],
							paas: [],
							hadoops: [],
							elseAuthes: []
						}
						if(item.isEtl == '是'){
							temp.isEtl = true
							temp.hftps.push({
								alloReqId: 0,
								deadline: 0,
								fourA: "",
								id: 0,
								isClient: false,
								isCluster: true,
								isPerson: true,
								isPro: false,
								peopleId: 0,
								peopleName: "",
								status: 0,
								subAccount: "",
								sysId: 0
							})
						}
						if(item.isPaas == '是'){
							temp.isPaas = true
							temp.paas.push({
								alloReqId: 0,
								deadline: 0,
								fourA: "",
								id: 0,
								paasType: "",
								peopleId: 0,
								peopleName: "",
								status: 0,
								subAccount: "",
								sysId: 0
							});
						}
						if(item.isUap == '是'){
							temp.isUap = true
							temp.hftps.push({
								alloReqId: 0,
								deadline: 0,
								fourA: "",
								id: 0,
								isClient: true,
								isCluster: false,
								isPerson: false,
								isPro: false,
								peopleId: 0,
								peopleName: "",
								status: 0,
								subAccount: "",
								sysId: 0
							});
						}
						if(item.isHadoop == '是'){
							temp.isHadoop = true
							temp.hadoops.push({
								alloReqId: 0,
								cpu: 0,
								deadline: 0,
								fourA: "",
								hdfs: "",
								home: "",
								id: 0,
								mem: 0,
								peopleId: 0,
								peopleName: "",
								status: 0,
								subAccount: "",
								sysId: 0,
								isClient: true
							});
						}
						if(item.isElse != ''){
							temp.isElse = true
							temp.elseAuthes.push({
								alloReqId: 0,
								deadline: 0,
								des: item.isElse,
								fourA: "",
								id: 0,
								peopleId: 0,
								peopleName: "",
								status: 0,
								subAccount: "",
								sysId: 0
							});
						}
						console.log("temp----->",temp)
						this.applyinfo.account.people.push(temp)
					}
				})
				this.$Notice.success({
					title: '导入成功',
				});
				el.value = "";
			},
			addAccount() {
				this.applyinfo.account.people.push({
					peopleUserId: 0,
					peopleName: "",
					tenantName: "",
					fourA: "",
					igroup: "",
					outterCompany: "",
					isEtl: false,
					isPaas: false,
					isUap: false,
					isHadoop: false,
					isElse: false,
					hftps: [],
					paas: [],
					hadoops: [],
					elseAuthes: []
				})
			},
			removeAccount(index) {
				this.applyinfo.account.people.splice(index, 1);
				this.applyinfo.account.peopleList.splice(index, 1);
				// var list = JSON.stringify(this.peopleList);
				// sessionStorage.setItem("list",list);
			},
			expandAccount(index) {
				if (this.accountIndex.indexOf(index) != -1) {
					this.accountIndex.splice(this.accountIndex.indexOf(index), 1)
				} else {
					this.accountIndex.push(index)
				}
				// if(this.applyinfo.account.people[index].isExpand == -1){
				//     this.applyinfo.account.people[index].isExpand = 0;
				// }else{
				//     this.applyinfo.account.people[index].isExpand = -1;
				// }
				// console.log(this.applyinfo.account.people[index].isExpand)
			},
			changeEtl(index) {
				if (this.applyinfo.account.people[index].isEtl) {
					this.applyinfo.account.people[index].hftps.push({
						alloReqId: 0,
						deadline: 0,
						fourA: "",
						id: 0,
						isClient: false,
						isCluster: true,
						isPerson: true,
						isPro: false,
						peopleId: 0,
						peopleName: "",
						status: 0,
						subAccount: "",
						sysId: 0
					});
					//console.log("999",this.applyinfo.account.people[index].hftps);
				} else {
					//console.log("000",this.applyinfo.account.people[index].hftps);
					for (var i = 0; i < this.applyinfo.account.people[index].hftps.length; i++) {
						if (this.applyinfo.account.people[index].hftps[i].isCluster) {
							this.applyinfo.account.people[index].hftps.splice(i, 1);
						}
					}
				}
			},
			changePaaS(index) {
				this.applyinfo.account.people[index].paas = [];
				if (this.applyinfo.account.people[index].isPaas) {
					this.applyinfo.account.people[index].paas.push({
						alloReqId: 0,
						deadline: 0,
						fourA: "",
						id: 0,
						paasType: "",
						peopleId: 0,
						peopleName: "",
						status: 0,
						subAccount: "",
						sysId: 0
					});
				}
			},
			changeUap(index) {
				if (this.applyinfo.account.people[index].isUap) {
					this.applyinfo.account.people[index].hftps.push({
						alloReqId: 0,
						deadline: 0,
						fourA: "",
						id: 0,
						isClient: true,
						isCluster: false,
						isPerson: false,
						isPro: false,
						peopleId: 0,
						peopleName: "",
						status: 0,
						subAccount: "",
						sysId: 0
					});
				} else {
					for (var i = 0; i < this.applyinfo.account.people[index].hftps.length; i++) {
						if (this.applyinfo.account.people[index].hftps[i].isClient) {
							this.applyinfo.account.people[index].hftps.splice(i, 1);
						}
					}
					//console.log("111",this.applyinfo.account.people[index].hftps);
				}
			},
			changeHadoop(index) {
				this.applyinfo.account.people[index].hadoops = [];
				if (this.applyinfo.account.people[index].isHadoop) {
					this.applyinfo.account.people[index].hadoops.push({
						alloReqId: 0,
						cpu: 0,
						deadline: 0,
						fourA: "",
						hdfs: "",
						home: "",
						id: 0,
						mem: 0,
						peopleId: 0,
						peopleName: "",
						status: 0,
						subAccount: "",
						sysId: 0,
						isClient: true
					});
				}
			},
			changeElse(index) {
				this.applyinfo.account.people[index].elseAuthes = [];
				if (this.applyinfo.account.people[index].isElse) {
					this.applyinfo.account.people[index].elseAuthes.push({
						alloReqId: 0,
						deadline: 0,
						des: "",
						fourA: "",
						id: 0,
						peopleId: 0,
						peopleName: "",
						status: 0,
						subAccount: "",
						sysId: 0
					});
				}
			},
			changePeople(list, index) {
				console.log("----changePeople---------", list, index);
				if (list.length > 0 && list[0] != undefined) {
					this.applyinfo.account.peopleList = []
					this.applyinfo.account.people[index].peopleUserId = list[0].id;
					this.applyinfo.account.people[index].peopleName = list[0].user_name;
					this.applyinfo.account.people[index].fourA = list[0].fourA

					this.applyinfo.account.peopleList = list;
				}
				// var list = JSON.stringify(this.peopleList);
				// sessionStorage.setItem("list",list);
			},
			outFileSize(file, fileList) {
				this.$Message.warning({
					content: file.name + " 上传失败！上传文件大小不允许超过10M",
					duration: 3
				})
			},
			validate() {
				var temp = this.applyinfo.account.people
				var b = false
				console.log("--data--->", b)
				if (temp.length > 0) {
					temp.some((item, index) => {
						if (item.peopleName == "") {
							this.$Message.warning({
								content: "请填写第" + (index + 1) + "条账号数据的姓名",
								duration: 3
							})
							b = true
							return true
						} else {

							if (item.fourA == "") {
								this.$Message.warning({
									content: "请填写“" + item.peopleName + "”账号的4A账号",
									duration: 3
								})
								b = true
								return true
							} else if (item.outterCompany == "") {
								this.$Message.warning({
									content: "请填写“" + item.peopleName + "”账号的成员归属",
									duration: 3
								})
								b = true
								return true
							} else if (!item.isEtl && !item.isPaas && !item.isUap && !item.isHadoop && !item.isElse) {
								console.log(item.isEtl, item.isPaas, item.isUap, item.isHadoop)
								this.$Message.warning({
									content: "请选择“" + item.peopleName + "”账号的至少一种账号类型！",
									duration: 3
								})
								b = true
								return true
							} else if (item.isElse && this.utils.objectIsEmpty(item.elseAuthes[0].des)) {
								this.$Message.warning({
									content: "请选择“" + item.peopleName + "”账号的其它账号类型！",
									duration: 3
								})
								b = true
								return true
							}
						}
					})
				}
				return b;

			},

		},
		props: {
			ifedit: {},
			Papply: {}
		},
		computed: {
			people() {
				return this.Papply.account.people
			}
		},
		watch: {
			people() {
				console.log("----------------------------->")
				if (this.applyinfo.account.people.length > 0) {
					this.accountIndex = []
					this.applyinfo.account.people.forEach((item, index) => {
						this.accountIndex.push(index)
					});
				}
			}
		}
	}
</script>
